<html lang="en" ng-app="KubernetesScaleDemo">
  <head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
    <meta name="viewport" content="initial-scale=1" />
  </head>
  <body>
    <div layout="column" style="margin-top: 20px; width: 80%" offset="10" ng-controller="AppCtrl">
      <md-toolbar layout="row" layout-align="space-around center">
	<h1 class="md-display-2">Kubernetes Scale Demo</h1>
	<a href="https://k8s.io"> <img src="https://raw.githubusercontent.com/kubernetes/kubernetes/master/logo/logo.png" style="width:84; height: 84" />
	</a>
      </md-toolbar>

      <div layout="row" class="md-whiteframe-z2" style="padding: 10px">
	<div layout-margin="10px" flex="20" style="text-align: right">
	  <div class="md-subhead">Version 0.2</div>
	  <div style="text-align: right">
	    <div class="md-display-1">{{ controller.getServers("0.2") | number:0 }}</div>
	  </div>
	  <div class="md-subhead">Version 0.3</div>
	  <div style="text-align: right">
	    <div class="md-display-1">{{ controller.getServers("0.3") | number:0 }}</div>
	  </div>
	</div>
	<div layout-margin="10px" style="margin-left: 25px" flex>
	  <div>
	  <div ng-repeat="pod in controller.getServersForVersion('0.2').concat(controller.getServersForVersion('0.3'))" style="display: inline-block; width: 50px; height: 50px;">
	    <div style="height: 50px; background: {{controller.getVersionColor(pod)}}">
	    </div>
	  </div>
	  </div>
	  <!--
	      <md-chips ng-model="controller.servers.items" readonly="true">
		<md-chip-template>
		  {{$chip.metadata.name}}
		</md-chip-template>
	      </md-chips>
	      -->
	</div>
      </div>

      <!-- Angular Material Dependencies -->
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>

      <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
      <script src="pods.js"></script>
    </div>
  </body>
</html>
